<!--
 * @Descripttion: 表头设置和页面设置
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-10 13:54:01
 * @LastEditors: GW
 * @LastEditTime: 2021-09-23 15:52:17
-->
<template>
    <section class="hearder-wrapper">
        <p>表头设置</p>
        <div class="set-box">
            <div class="set-logo">
                <!-- <img v-if="data.logo" class="img"></img> -->
                <a-upload name="file" list-type="picture-card" class="avatar-uploader" :before-upload="beforeUpload" :show-upload-list="false" :action="action" :headers="headers" @change="uploadFile">
                    <img v-if="data.logo" :src="data.logo" alt="avatar" />
                    <div v-else>
                        <a-icon :type="loading ? 'loading' : 'plus'" />
                        <div class="ant-upload-text">
                            上传logo
                        </div>
                    </div>
                </a-upload>

            </div>
            <div class="set-title">
                <a-input v-model.trim="data.title" placeholder="" maxLength="12"></a-input>
                <a-textarea class="remarks" v-model.trim="data.remarks" maxLength="32" cols="10" rows="3"></a-textarea>
            </div>
        </div>
        <!-- <p>表单顶部设置</p>
        <a-checkbox v-model="data.onOff">是否显示</a-checkbox> -->
        <a-divider></a-divider>
        <p>设置头部背景颜色</p>
        <a-input type="color" v-model="data.background"></a-input>
        <a-divider></a-divider>
         <p>设置标题字体颜色</p>
        <a-input type="color" v-model="data.bgColor"></a-input>
        <a-divider></a-divider>
        <p>用户提交后显示文字</p>
        <a-input v-model="data.prompt" placeholder="用户提交后显示文字"></a-input>
    </section>
</template>

<script>
import Vue from "vue";

function getBase64 (img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

export default {
    props: {
        data: {
            type: Object,
            default: {}
        }
    },
    data () {
        return {
            action: this.$Global.ApiBaseUrl + '/uploadFile',
            headers: { "Access-Token": Vue.ls.get("Access-Token") },
            fileList: [],
            loading: false,
        }
    },
    methods: {
        uploadFile (backdata) {

            if (backdata.file.status === 'uploading') {
                this.loading = true;
                return;
            }

            let fileList = backdata.fileList;
            this.fileList = fileList;

            let file = this.fileList[this.fileList.length - 1].response;
            console.log(this.fileList, file);
            setTimeout(() => {
                if (file && file.status) {

                    if (file.status === 'done') {
                        this.$message.success(`${file.name} 上传成功`);
                        this.data.logo = file.url;
                    }
                    if (file.status === 'error') {
                        this.$message.error(`${file.name} 上传失败`);
                    }
                }
            }, 1000);
        },
        beforeUpload (file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                this.$message.warning('请选择格式为 jpg、png、jpeg格式');
            }
            const isLt2M = file.size / 1024 / 1024 < 3;
            if (!isLt2M) {
                this.$message.warning('只能上传小于3M的图片!');
            }
            return isJpgOrPng && isLt2M;
        },
    }
}
</script>

<style lang="less" scoped>
    .hearder-wrapper {
        padding: 10px 10px 28px;
        .set-box {
            position: relative;
            width: 100%;
            height: 120px;
            .set-logo {
                position: absolute;
                top: 0px;
                left: 0px;
                text-align: center;
                line-height: 60px;
                font-size: 12px;
                cursor: pointer;
                overflow: hidden;
                .img {
                    width: 100%;
                }
            }
            .set-title {
                position: absolute;
                left: 120px;
                width: calc(100% - 120px);
                .remarks {
                    margin-top: 5px;
                    resize: none;
                }
            }
        }
        .avatar-uploader {
            img {
                width: 100%;
                max-height:86px;
            }
        }
    }
</style>